var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
var echartsRecordss = echarts.init(document.getElementById('echarts-recordss'), 'walden');
var echartsRecordThree = echarts.init(document.getElementById('main'), 'walden');
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - 9, shape.y - 9]
        const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
    }
})
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
        const c4 = [shape.x + 18, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + 18, shape.y - 9]
        const c3 = [shape.x + 9, shape.y - 18]
        const c4 = [shape.x - 9, shape.y - 9]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [6000, 6000, 6000, 6000, 6000]
const VALUE = [2012, 1230, 3790, 2349, 1654]

option = {
    backgroundColor: "#012366",
    title: {
        text: '',
        top: 32,
        left: 18,
        textStyle: {
            color: '#00F6FF',
            fontSize: 24
        }
    },
    grid: {
        left: 20,
        bottom: '19%',
        top: 50,
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['固定工资', '注册师津贴', '生产资金', '补充奖金', '创新成果专项奖励'],
        axisLine: {
            show: true,
            lineStyle: {
                color: 'white'
            }
        },
        offset: 10,
        axisTick: {
            show: false,
            length: 5,
            alignWithLabel: true,
            lineStyle: {
                color: '#7DFFFD'
            }
        },
        axisLabel: {
            fontSize: 10
        }
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
                color: 'white'
            }
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            fontSize: 16
        },
        boundaryGap: ['20%', '20%']
    },
    series: [{
        type: 'custom',
        renderItem: function (params, api) {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(47,102,192,.27)'
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(59,128,226,.27)'
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: 'rgba(72,156,221,.27)'
                    }
                }]
            }
        },
        // data: MAX
    }, {
        type: 'custom',
        renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3B80E2'
                        },
                        {
                            offset: 1,
                            color: '#49BEE5'
                        }
                        ])
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    // 右面
                    style: {
                        fill: new echarts.graphic.LinearGradient(10, 0, 0, 1, [{
                            offset: 0,
                            color: '#3B80E2'
                        },
                        {
                            offset: 1,
                            color: '#49BEE5'
                        }
                        ])
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    // 上面
                    style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#3B80E2'
                        },
                        {
                            offset: 1,
                            color: '#49BEE5'
                        }
                        ])
                    }
                }]
            }
        },
        data: VALUE
    }, {
        type: 'bar',
        label: {
            normal: {
                show: true,
                position: 'top',
                formatter: (e) => {
                    switch (e.name) {
                        case '10kV线路':
                            return VALUE[0]
                        case '公用配变':
                            return VALUE[1]
                        case '35kV主变':
                            return VALUE[2]
                        case '水':

                    }
                },
                fontSize: 16,
                color: '#fff',
                offset: [4, -25]
            }
        },
        itemStyle: {
            color: 'transparent'
        },
        data: MAX
    }]
}


const dataes = [
    { value: '150', name: '正式员工福利金额总计' },
    { value: '310', name: '外聘员工福利金额总计' },
]
const legendArr = [];
var p;
dataes.forEach((item, i) => {
    legendArr.push({
        type: 'plain',
        orient: 'vertical',
        align: 'left',
        top: `${80 - (i + 1) * 40}%`,
        x: 'left',
        itemWidth:10,
        itemHeight: 10,
        data: [
            {
                name: item.name,
                icon: 'rect',
                borderWidth: 0,
                itemWidth: 0,
                
            }
        ],
        padding: [50,10,50,0],
        // backgroundColor: {
        //     image: '../NumberRun/img/Rectangle.png'
        // },
        formatter: function (name) {
            var data = options.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {
                total += +data[i].value;
                if (data[i].name == name) {
                    tarValue = data[i].value;
                }
            }
            p = (tarValue / total * 100).toFixed(2);
           return name + '\n' + '\n ' + '\t\t' + tarValue + '万元' + '\t\t\t\t\t\t' + '' + p + '%' + '\n\n\t\t\t\t\t\t' + '总额' + '\t\t\t\t\t\t\t\t\t\t' + '占比';
        },
        textStyle: {
            color: '#fff',
            fontSize: 15,
            rich:{
                a:{
                    
                },
                b:{

                }
            }
        },
    })
})

// ______________________________________________________饼图_______________________________________________________
options = {
    title: {
        text: '\t\t{name|460}\t{name2|万}\n{name2|福利金额总计}',
        right: '15%',
        top: 'center',
        textStyle: {
            rich: {
                name: {
                    fontSize: 30,
                    lineHeight: 20,
                    fontWeight: 400,
                    color: "rgba(190, 229, 251, 1)",
                    textShadowColor: "#158EFF",
                    textShadowBlur: 18,
                },
                name2: {
                    lineHeight: 30,
                    fontSize: 15,
                    color: "rgba(190, 229, 251, 1)",
                    textShadowColor: "#158EFF",
                    textShadowBlur: 18,
                },
            },
        },
    },
    // tooltip: {
    //     trigger: 'item',
    //     formatter: "{a} <br/>{b}: {c} ({d}%)"
    // },
    legend: legendArr,
    series: [
        {
            name: '福利金额',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['75%', '50%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'inside',
            },
            emphasis: {
                label: {
                    
                    // 鼠标悬浮显示文字
                    show: false,
                    textStyle: {
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                show: false
            },
            data: dataes,
          
            itemStyle: {
                normal: {
                    color: function (d) {
                        var colorList = [
                            '#3a6fff',
                            '#ff7ab3'
                        ];
                        return colorList[d.dataIndex]
                    },
                    
                    
                }                
            }
        }
    ]
};

echartsRecords.setOption(option);
echartsRecordss.setOption(option);
echartsRecordThree.setOption(options)
window.onresize = function () {
    echartsRecords.resize();
    echartsRecordss.resize();
    echartsRecordThree.resize();
}
// {
//     orient: 'vertical',
//     top: '50px',
//     x: 'left',
//     // 设置百分比
//     formatter: function(name) {
//         var data = options.series[0].data;
//         var total = 0;
//         var tarValue;
//         for (var i = 0, l = data.length; i < l; i++) {
//             total += +data[i].value;
//             if (data[i].name == name) {
//                 tarValue = data[i].value;
//             }
//         }
//         var p = (tarValue / total * 100).toFixed(2);
//         return name + '\n' + '\n ' +'\t\t' + tarValue + '万元'+'\t\t\t\t\t\t'+ '' + p + '%'+'\n\n\t\t\t\t\t\t'+'总额'+'\t\t\t\t\t\t\t\t\t\t'+'占比';
//     },
//     // data: ['正式员工福利金额总计', '外聘员工福利金额总计'],
//     textStyle: { color: '#fff', fontSize: 15, padding: [50, 0, 50, 0] },
// },